<template>
  <router-view/>

  <van-tabbar v-if="showTabBar" fixed route :border="false">
    <van-tabbar-item replace to="/" icon="wap-home-o">所有文章</van-tabbar-item>
    <van-tabbar-item replace to="/" icon="eye-o">关注</van-tabbar-item>
    <van-tabbar-item to="/newarticle">
      <div class="tabbar-add-container">
        <div class="tabbar-add-wrap">
          <van-icon name="add" size="65" />
        </div>
      </div>
    </van-tabbar-item>
    <van-tabbar-item replace to="/" icon="manager-o">照片语音</van-tabbar-item>
    <van-tabbar-item replace to="/me" icon="setting-o">我的</van-tabbar-item>
  </van-tabbar>
  <div style="height: 5rem;"></div>
</template>


<script>
import {retrieveAuthingUser,checkLoginStatus} from "@/utils/authing"
import { retrieveUserProfile,storeUserProfile } from "@/utils/storage";
import { getSelfProfile } from "@/utils/api/me";
import "@authing/vue-ui-components/lib/index.min.css";

const tabbarBlacklist = ['/login','/me/setting','/newarticle','/me/profile'] //把不需要底部导航栏的页面路径放在这个数组里面

export default {
  name:'App',
  data () {
    return {
    }
  },
  components: {
  },
  computed: {
    tabbarBlacklist () {
      return tabbarBlacklist
    },
    user () {
      return this.$store.state.user
    },
    showTabBar() {
      const currentPath = this.$route.path
      if (this.tabbarBlacklist.includes(currentPath)) {
        return false
      }
      return true
    }
  },
  methods: {
    loadLocalProfile() {
      const profile = retrieveUserProfile()
      if (profile) {
      //更新vuex
      this.$store.commit('setUserProfile',profile)
      }
    },
    async loadNetworkProfile() {
      //判断登录状态
      const loggedIn = await checkLoginStatus()
      if (!loggedIn) {this.$store.commit('setUserProfile',null);return;}
      const profileResult = await getSelfProfile()
      //更新localStorage中的profile值
      storeUserProfile(profileResult.data)
      this.$store.commit('setUserProfile',profileResult.data)
    }
  },
  mounted() {
    this.loadLocalProfile()
    retrieveAuthingUser().then(
      (user)=>{this.$store.commit('setUser',user);this.loadNetworkProfile();})
  },
}

</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #323233;
  background-color: #f7f8fa;
  margin-top: 0px;
}

.tabbar-add-container {
  width: 70px;
  height: 110px;
  .tabbar-add-wrap {
    max-width: 100%;
  }
}
</style>

